<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> -->
<script type="text/javascript" src="../jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
<script src="../vendor/Mustache/mustache.js-master/mustache.js"></script>  

<script src="//js.pusher.com/2.2/pusher.min.js"></script> <!-- global -->
<div class="templatemo_section_2" >
  <?php 
  $applicant_id = $_SESSION['applicant_id'];
  
  $notif = listApplicantsNotif($applicant_id); 
  ?>

  	<h1>Notifications</h1>

    <div id="notifContainer">
            <?php 
            $count = 0;
            while($row = mysql_fetch_array($notif))
            { 
              $count++; 
              $x = $count % 3;
              $class = "";
              switch($x)
              {
                 case 1:
                    $class = "green";
                 break;
                 case 2:
                    $class = "blue";
                 break;
                 case 0:
                    $class = "yellow";
                 break;
              }
            ?>
            <div class="<?=$class?>">
            	<h3><?php $date = new DateTime($row['date_created'],new DateTimeZone('Asia/Hong_Kong')); echo $date->format('h:i:s A, d F Y ');?></h3>
                <?=$row['message']?>.
                  check your calendar.
 
            </div>
            <?php } ?>
      </div>
</div>



<script type="text/javascript">
$(function(){
  var audioElement2 = document.createElement('audio');
  audioElement2.setAttribute('src', '../media/friendrequest.mp3' );

  audioElement2.addEventListener("load", function() {

  }, true);

    $(document).ready(function(){
         var pusher = new Pusher("<?=PUSHER_APP_KEY?>");
         var channel = pusher.subscribe('my-channel');
    
          channel.bind('my-event', function(data) {

              console.log(data);
                audioElement2.play();
              var template = $('#notifTpl').html();
              var html = Mustache.to_html(template,data);
              $(html).prependTo('#notifContainer').hide().fadeIn();

          });
  
    });
});


</script>

<script>
$(function(){
    $('#notifContainer').slimScroll({
        height: '200px'
    });
});
    
</script>

<script type="text/template" id="notifTpl">
  <div class="yellow">
        <h3>{{date_created}}</h3>
          {{{message}}}
          
    </div>
</script>

